<template>
	<view class="content">
		<u-navbar
			title=""
			@rightClick="goBack"
			:autoBack="true"
		>
			<view slot="center" style="width: 65%; margin-right: 100rpx;">
				<u-search height="35" @search="searchClick" @custom="searchClick"  placeholder="请输入线路或目的地" bgColor="#f1f1f1" :actionStyle="searchStyle" :showAction="true" ></u-search>
			</view>
		</u-navbar>
		<view class="contentBody">
			<view class="history">历史记录</view>
			<view class="flex flexRow tagList">
				<view v-for="(item,i) in tagList" @click="searchClick" :data-val="item.value" :key="i" class="tag" >
					{{item.value}}
				</view>
			</view>
			<view>
				<u-divider
						customStyle="width:400rpx; margin-left:20%;"
				        text="旅游推荐"
				        textColor="#6ebda8"
				        lineColor="#6ebda8"
				></u-divider>
				<view class="recommend" v-if="recommendGoods.id">
					<goodsList :info="recommendGoods" ></goodsList>
				</view>
				<u-divider
				customStyle="width:400rpx; margin-left:20%;"
				        text="没有更多了"
				        textColor="#5e5f61"
				        lineColor="#e3e4e6"
				></u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../apis/http'
	import goodsList from '@/components/goodsList.vue'
	export default {
		data() {
			return {
				searchStyle:{
					'color':'#fff',
					'padding':'10rpx',
					'border-radius':'50rpx',
					'position':'absolute',
					'right':'200rpx',
					'background':'#5db9a0',
					'height':'20rpx',
					'line-height':'20rpx',
				},
				tagList:[],
				recommendGoods:{},
			}
		},
		components:{
			goodsList
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			searchClick(val){
				var value = val;
				if(val.type == 'click' || val.type == 'tap'){
					value = val.currentTarget.dataset.val;
				}
				console.log(value);
				http.POST('search/add',{val:value}).then(res=>{
					if(res.code == 1){
						this.tagList = res.data
						// 跳转到搜索列表页
						uni.navigateTo({
							url:"/pages/search/result?val="+value
						})
					}else{
						uni.showToast({
							'title':res.msg,
							'icon':'none'
						})
					}
				})
			},

			getTagList(){
				http.POST('search/list').then(res=>{
					this.tagList = res.data
				})
			},
			getRecommendGoods(){
				http.POST('goods/recommendGoods').then(res=>{
					this.recommendGoods = res.data;
					this.recommendGoods.imgWidth = '670rpx';
				})
			}
		},
		
		created() {
			this.getTagList()
			this.getRecommendGoods()
		}
	}
</script>

<style>
	.content {
		padding:  40rpx;
		padding-top: 130rpx;;
		background-color: #f6f7f9;
		padding-bottom: 500rpx;
	}
	.history { color: #292e34;}
	.flex { display: flex;}
	.flexRow{ flex-flow: row;}
	.tagList{ margin-top: 20rpx; flex-wrap: wrap !important;}
	.tag {
		text-align: center;
		padding: 0 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: 1px solid #e3e3e3;
		border-radius: 50rpx;
		margin: 0 30rpx 20rpx 0;
		color: #292e34;
	}
	.contentBody {
		padding-top:  calc(var(--window-bottom) + 120rpx);;
	}
</style>
